<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }"><i class="lh fw_300 lh-seller"></i></el-breadcrumb-item>
			<el-breadcrumb-item>B端-商户</el-breadcrumb-item>
			<el-breadcrumb-item>黑名单管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增</el-button>
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<!-- 城市 -->
							<el-form-item>
								<el-select class="w_110" v-model="city_id" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.city_name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_110">
								<el-autocomplete
									class="inline-input"
									v-model="area_name"
									:fetch-suggestions="querySearch4"
									placeholder="商圈名称"
									:trigger-on-focus="true"
									@select="handleSelect4"
								></el-autocomplete>
							</el-form-item>
							<!-- 人才姓名 -->
							<el-form-item class="w_100">
								<el-input v-model="staff_name" placeholder="人才姓名"></el-input>
							</el-form-item>
							<!-- 手机号 -->
							<el-form-item class="w_110">
								<el-input v-model="staff_tel" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item class="w_90">
								<el-select v-model="shielding_type1" placeholder="类型">
									<el-option label="类型" value=""></el-option>
									<el-option label="店铺黑名单" value="shop"></el-option>
									<el-option label="平台黑名单" value="platform"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_90">
								<el-select v-model="type" placeholder="状态">
									<el-option label="状态" value=""></el-option>
									<el-option label="生效中" value="1"></el-option>
									<el-option label="已作废" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="datetime1">
								<el-date-picker
									size="mini"
									class="w_160i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm"
									format="yyyy-MM-dd HH:mm"
									placeholder="开始时间"
									v-model="ruleForm.date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="datetime2">
								<el-date-picker
									size="mini"
									class="w_160i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm"
									format="yyyy-MM-dd HH:mm"
									placeholder="结束时间"
									v-model="ruleForm.date2"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="shopList" stripe>
						<el-table-column prop="id" label="序号" width="80px" align="center" type="index"></el-table-column>
						<!-- <el-table-column prop="shop_sn" label="店铺编号" width="125" align="center"></el-table-column>
						<el-table-column prop="business_name" label="所属商户" width="200px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.business_name }}</span>
							</template>
						</el-table-column> -->

						<el-table-column prop="staff_name" label="人才姓名" width="100"></el-table-column>
						<el-table-column prop="mobile" label="手机号" width="120px">
							<template slot-scope="{ row }">
								<span>{{ row.mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="black_type" label="类型" width="100">
							<template slot-scope="{ row }">
								<span v-if="row.black_type == 'shop'">店铺黑名单</span>
								<span v-if="row.black_type == 'platform'">平台黑名单</span>
							</template>
						</el-table-column>
						<el-table-column prop="reason" label="原因" min-width="160"></el-table-column>
						<el-table-column label="城市" align="center" width="80px">
							<template slot-scope="{ row }">
								<span>{{ row.city_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈" width="110"></el-table-column>
						<el-table-column prop="name" label="店铺名称" width="210px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contact_phone" label="负责人手机号" width="120px">
							<template slot-scope="{ row }">
								<span>{{ row.contact_phone }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" width="90">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.status == '1'">生效中</span>
								<span class="text-danger" v-if="row.status == '2'">已作废</span>
							</template>
						</el-table-column>
						<el-table-column prop="operator" label="操作人" width="80"></el-table-column>
						<el-table-column prop="last_time" label="最后更新时间" width="150px"></el-table-column>

						<el-table-column label="操作" width="100px" fixed="right">
							<template slot-scope="{ row }">
								<el-link :underline="false" type="primary" @click="toEdit(row)">编辑</el-link>
								<el-link :underline="false" type="danger" v-if="row.status == '1'" @click="toStop(row)">作废</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 新增黑名单 -->
		<el-dialog
			:title="diaTitle"
			:visible.sync="StateShowcx"
			width="650px"
			:close-on-click-modal="false"
			@close="hiddenRY"
		>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>类型</div>
					<div class="fl list-cont">
						<el-radio-group v-model="shielding_type" @change="selectShieldingtype()">
							<el-radio label="platform">平台黑名单</el-radio>
							<el-radio label="shop">店铺黑名单</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div class="row-info clear" v-if="shielding_type == 'shop'">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>店铺名称</span></div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input w_200"
							v-model="shop_name_StateShowcx"
							:fetch-suggestions="querySearch_StateShowcx"
							placeholder="请选择店铺"
							:trigger-on-focus="false"
							@select="handleSelect_StateShowcx"
							@input="clear_shop_msg"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>黑名单</span></div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input w_200"
							v-model="user_name_StateShowcx"
							:fetch-suggestions="querySearch_StateShowcx_user"
							placeholder="请选择人才"
							:trigger-on-focus="false"
							@select="handleSelect_StateShowcx_user"
							@input="clear_user_msg"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>手机号</span></div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input w_200"
							v-model="user_contact_phone_StateShowcx"
							:fetch-suggestions="querySearch_StateShowcx_phone"
							placeholder="请输入手机号"
							:trigger-on-focus="false"
							@select="handleSelect_StateShowcx_user"
							@input="clear_user_msg"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear red" v-if="black_card_num > 1">
					该人才共有{{ black_card_num }}个账号，确认后将全部拉黑
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>原因</span></div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="8" :cols="44" placeholder="" v-model="yuanyin"></el-input>
					</div>
				</div>
			</div>
			<!-- 是否有任务在身 -->
			<div class="other_task" v-if="unstartedTask">
				提示：该员工有<span class="is-underline" @click="noStartTask"> 未开始的任务 </span>，是否将任务撤回？
			</div>
			<div slot="footer" class="dialog-footer dialog-footer-flex">
				<span v-if="unstartedTask" class="btnOK mr_20" @click="addCxBtn('yes')">确认拉黑并撤回任务</span>
				<span v-if="unstartedTask" class="resetBtn mr_20" @click="addCxBtn('no')">确认拉黑不撤回任务</span>
				<span v-if="!unstartedTask" class="btnOK mr_20" @click="addCxBtn('no')">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>

		<!-- 编辑黑名单 -->
		<el-dialog
			:title="diaTitle"
			:visible.sync="StateShowcxEdit"
			width="650px"
			:close-on-click-modal="false"
			@close="hiddenRY"
		>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>类型</div>
					<div class="fl list-cont">
						<el-radio v-model="shielding_type" label="platform" disabled>平台黑名单</el-radio>
						<el-radio v-model="shielding_type" label="shop" disabled>店铺黑名单</el-radio>
					</div>
				</div>
				<div class="row-info clear" v-if="shielding_type == 'shop'">
					<div class="fl title-key">
						<span><i class="lhadmin lhadmin-wujiaoxing"></i>店铺名称</span>
					</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input w_200"
							v-model="shop_name_StateShowcx"
							placeholder="请选择店铺"
							:trigger-on-focus="true"
							disabled
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">
						<span><i class="lhadmin lhadmin-wujiaoxing"></i>黑名单</span>
					</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input w_200"
							v-model="user_name_StateShowcx"
							placeholder="请选择人才"
							:trigger-on-focus="true"
							disabled
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>原因</span></div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="8" :cols="44" placeholder="" v-model="yuanyin"></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="toEditTrue()">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>
		<!-- 作废 -->
		<el-dialog title="温馨提示" :visible.sync="FPShowStop" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>确认要将该条记录作废吗？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="next()">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { taskList } from '@/api/task.js' //查询任务
import { createBack, userList } from '@/api/user.js' //查询任务
import { fetchShopList } from '@/api/shop.js' //查询任务

export default {
	name: 'BlackList',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			id: '',
			//搜索对应值
			business_id: '', //所属商户ID
			business_name: '', //所属商户name
			business_sn: '', //所属商户sn
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			shop_sn: '', //店铺sn
			area_id: '', //商圈ID
			area_name: '', //商圈name
			type: '1', //状态
			city_id: '',
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			//弹框状态
			diaTitle: '',
			FPShowStop: false,
			StateShowcx: false,
			StateShowcxEdit: false,

			shielding_type: '', //拉黑类型
			shielding_type1: '',
			unstartedTask: false, //拉黑控制显示隐藏

			shopList: [], //店铺列表
			shopList2: [], //搜索栏目的店铺列表
			userlist: [], //搜索人才列表
			cityList: [], //城市列表
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',

			shop_id_StateShowcx: '',
			shop_name_StateShowcx: '',
			shop_city_id_StateShowcx: '',
			shop_area_id_StateShowcx: '',
			shop_sn_StateShowcx: '',
			shop_business_sn_StateShowcx: '',

			user_id_StateShowcx: '',
			user_name_StateShowcx: '',
			user_contact_phone_StateShowcx: '',
			user_sn_StateShowcx: '',
			user_identity_card: '',
			black_card_num: '',
			yuanyin: '', //黑名单原因
			staff_name: '',
			staff_tel: ''
		}
	},
	created() {
		//时间的默认选中
		this.ruleForm.date1 = this.date(-30) + ' 00:00:00'
		this.ruleForm.date2 = this.date(0) + ' 23:59:00'
		this.getcityList()
	},
	mounted() {
		this.getMerchants() //商户列表
		this.listArea() //商圈列表
	},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},

		//切换拉黑类型
		selectShieldingtype() {
			this.unstartedTask = false
			if (this.shielding_type == 'platform') {
				//平台拉黑
				if (this.user_name_StateShowcx) {
					this.notTalk()
				} else {
					this.unstartedTask = false
				}
			} else if (this.shielding_type == 'shop') {
				//店铺拉黑
				if (this.shop_sn_StateShowcx && this.user_name_StateShowcx) {
					this.notTalk()
				} else {
					this.unstartedTask = false
				}
			}
		},
		//拉黑查询是否有未完成的任务
		async notTalk(shopId) {
			try {
				let ret = await taskList({
					pageSize: 10,
					page: 1,
					staff_name: this.user_name_StateShowcx,
					shop_id: this.shop_sn_StateShowcx,
					status: '15,20,30'
				})
				//判断是否有未完成的任务

				if (ret && ret.list.length > 0) {
					this.unstartedTask = true
				} else {
					this.unstartedTask = false
				}
			} catch (err) {
				console.log('error:', err)
			}
		},
		//查看未开始的任务
		noStartTask() {
			//任务列表
			this.$router.push({
				path: '/tasklist',
				query: {
					name: this.user_name_StateShowcx,
					shop_id: this.shop_id_StateShowcx,
					shop_name: this.shop_name_StateShowcx
				}
			})
		},
		//获取商户列表
		getMerchants() {
			let fn = new FormData()
			this.$http.post(this.url + '/business/listForSearch', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data.list != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.merchantsList = res.data.data.list
						} else {
							this.merchantsList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeCity(val) {
			this.listArea(val) //商圈列表
			this.area_id = ''
			this.area_name = ''
		},
		listArea(city_id = '') {
			//获取商圈列表
			let fn = new FormData()
			fn.append('city_id', city_id) //页码
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		listShop() {
			//获取列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('status', this.type)
			fn.append('black_type', this.shielding_type1)
			fn.append('city_id', this.city_id)
			if (this.area_name == '') {
				this.area_id = ''
			}
			fn.append('area_id', this.area_id)
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			fn.append('shop_sn', this.shop_sn)
			if (this.business_name == '') {
				this.business_sn = ''
			}
			fn.append('business_sn', this.business_sn)

			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 == null) {
				this.ruleForm.date1 = ''
			}
			if (this.ruleForm.date2 == null) {
				this.ruleForm.date2 = ''
			}
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			fn.append('start_time', ruleForm_date1)
			fn.append('end_time', ruleForm_date2)

			fn.append('staff_name', this.staff_name) //人才姓名
			fn.append('mobile', this.staff_tel) //手机号

			this.$http.post(this.url + '/blackList/getList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							this.shopList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.listShop()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.business_id = ''
			this.business_name = ''
			this.business_sn = ''
			this.shop_id = ''
			this.shop_name = ''
			this.shop_sn = ''
			this.area_id = ''
			this.area_name = ''
			this.type = '1'
			this.city_id = ''
			this.ruleForm.date1 = this.date(-30) + ' 00:00:00'
			this.ruleForm.date2 = this.date(0) + ' 23:59:00'
			this.shielding_type1 = ''
			this.staff_sn = ''
			this.identity_card = ''
			this.reason = ''
			this.staff_name = ''
			this.staff_tel = ''
		},
		//添加黑名单
		goToAdd() {
			this.shielding_type = 'shop'
			this.diaTitle = '新增黑名单'
			this.StateShowcx = true
			this.black_card_num = ''
			this.yuanyin = ''
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},
		//黑名单店铺的自动完成
		async querySearch_StateShowcx(queryString, cb) {
			if(queryString){
				try {
					let ret = await fetchShopList({
						sign_status: 30, //已合作的店铺
						status: 1, //启用的店铺
						search_list: '', //不进行分页
						fields: 'id,shop_sn,business_sn,area_id,city_id,name',
						name: queryString
					});
					ret.list.forEach((item) => {
						item.value = item.name;
					});
					var restaurants = ret.list;
					var results = queryString
					? restaurants.filter(this.createFilter_StateShowcx(queryString))
					: restaurants;
					cb(results);
				} catch (err) {
					console.log("error:", err);
				}
			}
		},
		createFilter_StateShowcx(queryString) {
			return (shop_name_StateShowcx) => {
				return (
				shop_name_StateShowcx.value
					.toLowerCase()
					.indexOf(queryString.toLowerCase()) === 0
				);
			};
		},
		handleSelect_StateShowcx(item) {
			this.shop_id_StateShowcx = item.id
			this.shop_city_id_StateShowcx = item.city_id
			this.shop_area_id_StateShowcx = item.area_id
			this.shop_sn_StateShowcx = item.shop_sn
			this.shop_business_sn_StateShowcx = item.business_sn
			if (this.user_name_StateShowcx) {
				this.notTalk()
			}
		},
		clear_shop_msg(){
			this.shop_id_StateShowcx = ''
			this.shop_city_id_StateShowcx = ''
			this.shop_area_id_StateShowcx = ''
			this.shop_sn_StateShowcx = ''
			this.shop_business_sn_StateShowcx = ''
		},
		//人才手机号
		async querySearch_StateShowcx_phone(queryString, cb){
			if(queryString){
				try {
					let ret = await userList({
						certification_status: 1, //实名认证状态 [1]已认证 [2]未认证
						fields: "id,staff_sn,name,certification_info",
						mobile: queryString
					});
					ret.list.forEach((item) => {
						item.value = item.name + item.mobile;
					});
					var restaurants = ret.list;
					var results = queryString
					? restaurants.filter(this.createFilter_StateShowcx_phone(queryString))
					: restaurants;
					cb(results);
				} catch (err) {
					console.log("error:", err);
				}
			}
		},
		createFilter_StateShowcx_phone(queryString) {
			return (user_contact_phone_StateShowcx) => {
				return (
				user_contact_phone_StateShowcx.mobile
					.toLowerCase()
					.indexOf(queryString.toLowerCase()) === 0
				);
			};
		},
		//人才的自动完成
		async querySearch_StateShowcx_user(queryString, cb) {
			if(queryString){
				try {
					let ret = await userList({
						certification_status: 1, //实名认证状态 [1]已认证 [2]未认证
						fields: "id,staff_sn,mobile,certification_info",
						name: queryString
					});
					ret.list.forEach((item) => {
						item.value = item.name + item.mobile;
					});
					var restaurants = ret.list;
					var results = queryString
					? restaurants.filter(this.createFilter_StateShowcx_user(queryString))
					: restaurants;
					cb(results);
				} catch (err) {
					console.log("error:", err);
				}
			}
		},
		createFilter_StateShowcx_user(queryString) {
			return (user_name_StateShowcx) => {
				return (
				user_name_StateShowcx.value
					.toLowerCase()
					.indexOf(queryString.toLowerCase()) === 0
				);
			};
		},
		handleSelect_StateShowcx_user(item) {
			this.user_id_StateShowcx = item.id
			this.user_contact_phone_StateShowcx = item.mobile
			this.user_sn_StateShowcx = item.staff_sn
			this.user_name_StateShowcx = item.name
			this.user_identity_card = item.certification_info.identity_card
			if (this.user_identity_card) {
				this.userCardList() //查询实名用户
			}
			if (this.shielding_type == 'platform') {
				//平台
				this.notTalk()
			} else if (this.shielding_type == 'shop' && this.shop_sn_StateShowcx) {
				this.notTalk()
			}
		},
		//黑名单人才清除数据
		clear_user_msg() {
			this.user_sn_StateShowcx = ''
			this.user_identity_card = ''
			this.black_card_num = ''
		},
		//查询身份证号下的人
		async userCardList() {
			let fn = {
				pageSize: 1000,
				page: 1,
				identity_card: this.user_identity_card
			}
			try {
				let ret = await userList(fn)
				this.black_card_num = ret.list.length
			} catch (err) {
				console.log('error:', err)
			}
		},

		//商户的自动完成
		querySearch3(queryString, cb) {
			var restaurants = this.merchantsList
			var results = queryString ? restaurants.filter(this.createFilter3(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter3(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect3(item) {
			this.business_name = item.name
			this.business_id = item.id
			this.business_sn = item.business_sn
		},
		//商圈的自动完成
		querySearch4(queryString, cb) {
			var restaurants = this.areaList
			var results = queryString ? restaurants.filter(this.createFilter4(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter4(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect4(item) {
			this.area_id = item.id
		},
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
						if (res.data.data.list.length > 0) {
							this.city_id = res.data.data.list[0].id
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//隐藏弹框
		hiddenRY() {
			this.FPShowStop = false
			this.StateShowcx = false
			this.StateShowcxEdit = false
			this.shop_id_StateShowcx = ''
			this.shop_name_StateShowcx = ''
			this.shop_city_id_StateShowcx = ''
			this.shop_area_id_StateShowcx = ''
			this.shop_sn_StateShowcx = ''
			this.shop_business_sn_StateShowcx = ''

			this.user_id_StateShowcx = ''
			this.user_name_StateShowcx = ''
			this.user_contact_phone_StateShowcx = ''
			this.user_sn_StateShowcx = ''
			this.yuanyin = ''
		},

		//确认新增黑名单
		addCxBtn(type) {
			//判断是否为空
			if (this.shielding_type == 'shop') {
				if (!this.shop_sn_StateShowcx) {
					this.$message.error('请选择店铺')
					return
				}
			}
			if (!this.user_identity_card) {
				this.$message.error('请选择人才')
				return
			}
			if (!this.yuanyin) {
				this.$message.error('请填写拉黑原因')
				return
			}
			let fn = new FormData()
			if (this.shielding_type == 'shop') {
				//店铺
				fn.append('shop_sn', this.shop_sn_StateShowcx)
				fn.append('shop_name', this.shop_name_StateShowcx)
			} else {
				fn.append('shop_sn', '')
				fn.append('shop_name', '')
			}
			fn.append('staff_sn', this.user_sn_StateShowcx)
			fn.append('identity_card', this.user_identity_card)
			fn.append('reason', this.yuanyin)
			fn.append('black_type', this.shielding_type) //拉黑类型
			fn.append('is_withdraw', type) //撤不撤任务
			this.$http.post(this.url + '/blackList/create', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
						this.hiddenRY()
						this.resetData()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//点击编辑
		toEdit(row) {
			this.id = row.id
			this.diaTitle = '编辑黑名单'
			this.StateShowcxEdit = true
			let fn = new FormData()
			fn.append('id', this.id)
			this.$http.post(this.url + '/blackList/getInfo', fn).then(
				res => {
					if (res.data.code == '200') {
						this.shop_name_StateShowcx = res.data.data.shop_name
						this.user_name_StateShowcx = res.data.data.staff_name
						this.yuanyin = res.data.data.reason
						this.shielding_type = res.data.data.black_type
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		// 确认编辑
		toEditTrue() {
			let fn = new FormData()
			fn.append('id', this.id)
			fn.append('reason', this.yuanyin)
			this.$http.post(this.url + '/blackList/setInfo', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
						this.hiddenRY()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//点击作废
		toStop(row) {
			this.id = row.id
			this.FPShowStop = true
		},
		// 点击确认作废
		next() {
			let fn = new FormData()
			fn.append('id', this.id)
			this.$http.post(this.url + '/blackList/invalid', fn).then(
				res => {
					if (res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
						this.hiddenRY()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//跳转店铺详情
		goToTag(row) {
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.shop_id } })
			window.open(href, '_blank')
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		downloadOrder() {
			//导出
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			if (this.area_name == '') {
				this.area_id = ''
			}
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			if (this.business_name == '') {
				this.business_sn = ''
			}

			// fn.append('staff_name', this.staff_name) //人才姓名
			// fn.append('mobile', this.staff_tel) //手机号
			let obj = {
				export: 1,
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				status: this.type,
				area_id: this.area_id,
				shop_sn: this.shop_sn,
				black_type: this.shielding_type1,
				business_sn: this.business_sn,
				start_time: ruleForm_date1,
				end_time: ruleForm_date2,
				staff_name: this.staff_name,
				mobile: this.staff_tel
			}
			let param = $.param(obj)
			window.location.href = this.url + '/blackList/getList?' + param
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.click_state {
	cursor: pointer;
}

.JobCentent .wrap_top {
	display: flex;
	margin-right: 0px;
}

.row-info {
	padding: 5px 0;
}
.other_task {
	padding: 20px 0 0 20px;
}
.is-underline {
	color: #02a7f0;
}
.dialog-footer-flex {
	display: flex;
	justify-content: center;
}
.red {
	color: red;
	font-size: 12px;
	padding-left: 90px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/BlackList.vue